<template>
	<view class="carlist">
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in carlist" :key="index">
				<view class="car" @click="goCar(item.id)">
					<view class="name">
						{{item.name}}
					</view>
					<view class="year">
						<view>年份：{{item.year}}</view>
						<view>变速箱：{{item.bianSuQi}}</view>
						<view>座位数：{{item.seats}}</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seriesId: 0,
				pageIndex: 1,
				count: 0,
				carlist: []
			}
		},
		methods: {
			async loadCarlist() {
				// 判断是否加载了所有数据
				if (this.count === this.carlist.length && this.count != 0) {
					return
				}
				let {
					data,
					count
				} = await uni.$get('getAllCar', {
					seriesId: this.seriesId,
					pageIndex: this.pageIndex,
					pageSize: 20
				})
				console.log(data)
				this.carlist.push(...data)
				this.count = count
			},
			scrolltolower() {
				this.pageIndex++
				this.loadCarlist()
			},
			goCar(carId) {
				uni.navigateTo({
					url:'../car/car?carId=' + carId
				})
			}
		},
		onLoad({
			seriesId
		}) {
			this.seriesId = seriesId
			this.loadCarlist()
		}
	}
</script>

<style scoped lang="scss">
	.carlist {
		padding: 0 10px;

		.car {
			border-bottom: 1px solid #eee;
			padding-bottom: 10px;

			.name {
				font-size: 16px;
				padding: 10px 0;
			}

			.year {
				display: flex;

				view {
					flex: 1;
				}
			}
		}
	}
</style>
